<template>
  <div class="event-total chart-box1">
    <div class="chart-title">事件统计</div>
    <div class="chart-content">
      <div class="total">
        <div class="left">
          <div class="info-icon">
            <cu-icon type="org-shijian" :style="{ color: primaryColor }" />
          </div>
          <div>
            <div>
              <span class="number" style="font-size: 2rem">
                <count-to
                  :start-val="eventNumInfo.event_total.oldVal"
                  :end-val="eventNumInfo.event_total.newVal"
                  :duration="3000"
                />
              </span>
              <span class="ml-4">件</span>
            </div>
            <div style="margin-top: -5px">事件总数</div>
          </div>
        </div>
        <div class="right">
          <div>
            <div class="number">
              <count-to
                :start-val="eventNumInfo.complete_event_total.oldVal"
                :end-val="eventNumInfo.complete_event_total.newVal"
                :duration="3000"
              />
            </div>
            <div style="margin-top: -5px">
              <a-badge color="green" />
              <span style="margin-left: -4px">已处理完成</span>
            </div>
          </div>
          <div style="margin-left: 2rem">
            <div class="number">
              <count-to
                :start-val="eventNumInfo.incomplete_event_total.oldVal"
                :end-val="eventNumInfo.incomplete_event_total.newVal"
                :duration="3000"
              />
            </div>
            <div style="margin-top: -5px">
              <a-badge color="blue" />
              <span style="margin-left: -4px">未处理完成</span>
            </div>
          </div>
        </div>
      </div>
      <div :id="chartId" class="chart-container"></div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  nextTick,
  onBeforeUnmount,
  onMounted,
  reactive,
  toRaw,
  toRefs,
  watch,
} from "vue";
import { Chart, registerTheme } from "@antv/g2";
import common from "../../utils/common";
import CountTo from "../countTo/index.vue";
import store from "../../../../store";

export default defineComponent({
  name: "EventTotal",
  components: { CountTo },
  setup(props) {
    const nameKeyMap = {
      device_event_count: "设备",
      environment_event_count: "环境",
      pass_event_count: "人车",
      energy_event_count: "能源",
      fire_control_event_count: "安防",
    };
    const state = reactive({
      ...common.theme,
      chartId: "eventTotalChart",
      chart: null,
      data: [
        { title: "设备", value: 0, key: "device_event_count" },
        { title: "环境", value: 0, key: "environment_event_count" },
        { title: "人车", value: 0, key: "pass_event_count" },
        { title: "能源", value: 0, key: "energy_event_count" },
        { title: "安防", value: 0, key: "fire_control_event_count" },
      ],
      eventNumInfo: {
        event_total: { ...common.countToInit },
        incomplete_event_total: { ...common.countToInit },
        complete_event_total: { ...common.countToInit },
      },
    });

    const initChart = () => {
      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
        theme: "chartTheme",
        padding: [25, 10, 20, 30],
      });
      state.chart.data(state.data);
      state.chart.scale("value", {
        min: 0,
        max: 100,
        alias: "事件占比",
      });
      state.chart.tooltip(false);
      state.chart.interaction("active-region");
      state.chart
        .interval()
        .position("title*value")
        .style({
          fill: "l(90) 0:rgba(56, 176, 92, 0.5)  1:rgba(56, 176, 92, 1)",
        })
        .size(20);

      state.chart.axis("value", {
        grid: {
          line: {
            style: {
              lineDash: [5],
              stroke: "rgba(255,255,255,0.2)",
            },
          },
        },
        label: {
          style: {
            fill: "rgba(255,255,255,0.8)",
          },
        },
      });
      state.chart.axis("title", {
        label: {
          style: {
            fill: "rgba(255,255,255,0.8)",
          },
        },
      });
      // 添加文本标注
      state.data.forEach((item) => {
        state.chart.annotation().text({
          position: [item.title, item.value],
          content: item.value + "%",
          style: {
            textAlign: "center",
            fill: "#fff",
          },
          offsetY: -8,
        });
      });
      state.chart.render();
    };

    watch(
      () => store.getters.synthetical.EventTotal,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { EventTotal } = store.getters.synthetical;
      if (EventTotal) {
        state.data = [];
        for (let key in EventTotal) {
          if (nameKeyMap[key]) {
            state.data.push({
              key,
              value: Number(EventTotal[key]),
              title: nameKeyMap[key],
            });
          } else {
            let newItem = {
              oldVal: state.eventNumInfo[key]["newVal"],
              newVal: Number(EventTotal[key]),
            };
            state.eventNumInfo[key] = { ...newItem };
          }
        }
        console.log("---------------EventTotal", toRaw(state.data));
        if (state.chart) {
          state.chart.changeData(state.data);
        } else {
          initChart();
        }
      }
    };

    onMounted(() => {
      registerTheme("chartTheme", common.chartTheme);
      nextTick(() => {
        getData();
      });
    });

    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
.event-total {
  .chart-content {
    font-size: 1.2rem;
    .total {
      height: 4rem;
      width: 100%;
      padding: 0 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left,
      .right {
        display: flex;
        align-items: center;
      }
    }
    #eventTotalChart {
      height: calc(~"100% - 4rem");
    }
  }
}
</style>
